<template>
  <el-dialog title="选择节目" width="600px" v-model="dialogFormVisible">
    <div class="send-program-table">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column property="program_name" label="节目名称">
        </el-table-column>
        <el-table-column label="" width="50">
                <i class="el-icon-success"></i>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="cancelFunc()">取 消</el-button>
        <el-button size="small" type="primary" @click="confirmFunc()"
          >确定发送</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      //是否显示
      dialogFormVisible: false,
      //表单数据
      form: {},
      //左边标签宽度
      formLabelWidth: "120px",
      //数据列表
      tableData: [
        {
          date: "2016-05-02",
          program_name: "最新节目AAAA",
        },
        {
          date: "2016-05-04",
          program_name: "最新节目BBBB",
        },
        {
          date: "2016-05-01",
          program_name: "最新节目CCCC",
        },
        {
          date: "2016-05-03",
          program_name: "最新节目DDDD",
        },
      ],
      //选中的
      currentRow: null,
    };
  },
  props: {
    visible: Boolean,
  },
  watch: {
    //监听是否显示
    visible(newVal, oldVal) {
      if (newVal != oldVal) {
        this.dialogFormVisible = newVal;
      }
    },
  },
  created() {},
  methods: {
    /**
     * 确认
     */
    confirmFunc() {
      this.$message({
        type: "success",
        message: "操作成功!",
      });
      this.cancelFunc();
    },

    /**
     * 取消
     */
    cancelFunc() {
      this.$emit("close", false);
    },
  },
};
</script>

<style lang="scss">
.send-program-table .el-table__body tr > td .el-icon-success{
    display: none;
}
.send-program-table .el-table__body tr.current-row > td .el-icon-success{
    display: block;
    font-size: 20px;
    color: $main_color;
}
</style>